<template>
  <!-- 空调视频弹窗 风机视频弹窗 电子围栏视频弹窗 -->
  <div class="video-popup">
    <div id="videopopup2"></div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue, Prop } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  @Prop() datas!: any;
  formData = {
    indexCode: "",
    stationId: "",
    yzwbm: "",
  };
  PreviewOCX: any = null;
  videoApi() {
    (this as any).$services
      .getPreview({ data: this.formData, dataType: "text" })
      .then((xml: any) => {
        // console.log(xml);
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        if (ocx.startPreview(winindex, xml) === 0) {
          if (this.formData.yzwbm) {
            this.ptzGetPoint(
              this.formData.yzwbm,
              this.PreviewOCX.PTZ_CMD_START
            );
          }
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  ptzGetPoint(pointIndex, action) {
    var xml = [];
    xml.push('<?xml version="1.0" encoding="utf-8"?>');
    xml.push("<PtzControl>");
    xml.push("<Action>" + action + "</Action>");
    xml.push("<Priority>50</Priority>");
    xml.push("<Speed>5</Speed>");
    xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
    xml.push("</PtzControl>");
    if (
      this.PreviewOCX.ptzControl(
        this.PreviewOCX.PRESET_CMD_GOTO_PRESET,
        xml.join("")
      ) == this.PreviewOCX.SUCCESS
    ) {
      console.log("预置位调用成功");
      return this.PreviewOCX.SUCCESS;
    } else {
      console.log("预置位调用失败");
      return this.PreviewOCX.FAILED;
    }
  }
  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "videopopup2",
      theme: "",
    }));
    return ocx;
  }
  tokenCallEvent(reqID) {
    let data = {
      stationId: this.formData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  public Vodeoidchange() {
    let dwid = this.datas.id;
    console.log(123, dwid);

    (this as any).$services
      .onlineMonitorQueryVideo({ data: { dwid } })
      .then((result: any) => {
        this.formData.indexCode = result.data[0].videoCode;
        this.formData.stationId = result.data[0].stationId;
        this.formData.yzwbm = result.data[0].preset;
        this.videoApi();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    this.Vodeoidchange();
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setCallBack();
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
  }
}
</script>

<style lang="scss" scoped>
.video-popup {
  width: 100%;
  height: 5rem;
  #videopopup2 {
    width: 100%;
    height: 100%;
  }
}
</style>
